<%@ page language="java" pageEncoding="UTF-8"%>  
<%@ taglib prefix = "c" uri="http://java.sun.com/jsp/jstl/core"%>

<%  
String path = request.getContextPath();  
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";  
%>  
<!DOCTYPE html>  
<html>  
<head>  
	<style type='text/css'>    
		.clear { zoom:1; }
		.clear:after { visibility:hidden; display:block; font-size:0; content:"1"; clear:both; height:0; }
		.main { width:1200px; }
		.btn span { width:100px; text-align:center;  background:#f00; cursor:pointer; margin:0 5px; display:block; float:left; }
		.con { display:none; border:#033 1px solid; height:600px; width:1000px; }
    </style>
	<script src = "<%=path%>/jsAndCss/js/jquery-1.9.1.min.js"></script>

</head>  
<body>  
	<div>
		<h1>用户功能主页</h1>
	</div>
	<div class="main">
		<div class = "btn clear">
			<span>用户列表</span>
			<span>用户编辑</span>
		</div>
		
		<div class = "con">
			 <!--用户列表区域  -->
			 <h2><input type ="text" > 
			 		<a href = "<%=path%>/sysmanage/user/getUserList.do">查询用户</a></h2>
			 <h2> <input type = "button" value = "ajax查询用户" onclick="userMgr.queryUserList();">
			 	<input type = "button" value = "ajax增加用户" onclick="userMgr.gotoUserEdit(null);">
			 	
			 </h2>		
			  	<table border="1" cellpadding="10" cellspacing = "0" id = "userListTable">
			  		<thead>
				  		<tr>
				  			<th>用户名</th>
				  			<th>登陆名</th>
				  			<th>年龄</th>
				  			<th>性别</th>
				  			<th>操作</th>
				  			<th>操作</th>
				  		</tr>
			  		</thead>
			  		<tbody>
			  		<%-- <c:if test="${userList!=null}">
			  			
			  			<c:forEach items = "${userList}" var = "user">
			  				<tr>
				  				<td>${user.userName}</td>
				  				<td>${user.loginName}</td>
				  				
					  			<td>${user.age}</td>
					  			<td>${user.sex}</td>
					  			<td><a href = "<%=path%>/sysmanage/user/gotoUserEdit.do?userId=${user.userId}">修改</a></td>
					  			<td><a href = "<%=path%>/sysmanage/user/userDel.do?userId=${user.userId}">删除</a></td>
				  			</tr> 			 
			  			</c:forEach>
			  		</c:if>
			  		<c:if test="${userList==null}">
			  			<tr><td colspan = "6">没有查询到用户信息</td></tr>
			  		</c:if> --%>
			  		</tbody>
			  	</table>
			 
			 
		</div>
		
		<div class = "con">
			<h1>编辑用户信息</h1>
			<form  method = "post" id="userEditForm">
	 	 	<input type = "hidden" name = "userId" id ="userId">
	 	 	<h2>用户名称:<input type = "text" name = "userName" id="userName"></h2>
	 	 	<h2>登陆名称:<input type = "text" name = "loginName"  id = "loginName" value = ></h2>
	 	 	<h2>用户性别:
	 	 		<select name = "sex"  id = "sex">
	 	 			<option value = "1" >boy</option>
	 	 			<option value = "2" >girl</option> 	 		
	 	 		</select>	 	
	 	 	</h2>
	 	 	<h2>用户年龄:<input type = "text" name = "age" id = "age"></h2>
	 	 	<h2><input type = "button" value = "保存" onclick = "userMgr.saveUser();">&nbsp;&nbsp;&nbsp;</h2>
	 	 </form>
		</div>
	 
	</div>
	
</body>   
<script type="text/javascript"> 
	  $(".con").eq(0).show();
	  $(".btn span").click(function(){
	    var num =$(".btn span").index(this);
	    $('.con').eq(num).css({display:'block'}).siblings('.con').css({display:'none'});
	  });
	
	  var userMgr={
			//ajax查询用户列表方法 
			queryUserList :function(){
				$.ajax({
					type:'post', //请求方式
					url :'<%=path%>/sysmanage/user/getUserListAjaxJson.do',
					dataType:'json',//返回的数据格式 json xml html text
					data: {},//传递给服务器的参数
					success:function(data){//与服务器交互成功以后的回调函数
						alert(data);
					    var htmlTable = "";
						if(data!=null&&data.length>0){
							for(var i =0;i<data.length;i++){
								htmlTable = htmlTable+"<tr>";								
								htmlTable = htmlTable+"<td>";
								htmlTable = htmlTable+data[i].userName;
								htmlTable = htmlTable+"</td>";
								htmlTable = htmlTable+"<td>";
								htmlTable = htmlTable+data[i].loginName;
								htmlTable = htmlTable+"</td>";
								htmlTable = htmlTable+"<td>";
								htmlTable = htmlTable+data[i].age;
								htmlTable = htmlTable+"</td>";	
								htmlTable = htmlTable+"<td>";
								htmlTable = htmlTable+data[i].sex;
								htmlTable = htmlTable+"</td>";
 								var editButton ="<a href='javascript:userMgr.gotoUserEdit("+data[i].userId+")'>修改</a>";
 								var delButton ="<a href='javascript:userMgr.delUser("+data[i].userId+")'>删除</a>";
 								htmlTable = htmlTable+"<td>";
 								htmlTable = htmlTable+editButton;
 								htmlTable = htmlTable+"</td>";	
 								htmlTable = htmlTable+"<td>";
 								htmlTable = htmlTable+delButton;
 								htmlTable = htmlTable+"</td>";	
 								
 								htmlTable = htmlTable+"</tr>";	


							}	
							$('#userListTable').find('tbody').html(htmlTable);
						}else{
							$('#userListTable').find('tbody').html("<tr><td >没有查询到数据</td></tr>")
						}	
						
					}
				})					
			},
			
 		//ajax删除用户方法 
		delUser :function(userId){
			$.ajax({
				type:'post', //请求方式
				url :'<%=path%>/sysmanage/user/userDelAjaxJson.do',
				dataType:'json',//返回的数据格式 json xml html text
				data: "userId="+userId,//传递给服务器的参数
				success:function(data){//与服务器交互成功以后的回调函数
					alert(data.result);
					//一般在我们的修改增加或者删除功能之后,都要重新查询一次证明给用户看
					userMgr.queryUserList();
				}
			})					
		},
			
		//ajax修改用户方法 
		gotoUserEdit :function(userId){
			//将tab页跳转至编辑tab
			$('.con').eq(1).css({display:'block'}).siblings('.con').css({display:'none'});
			if(userId!=null){
				$.ajax({
					type:'post', //请求方式
					url :'<%=path%>/sysmanage/user/getUserByIdAjaxJson.do',
					dataType:'json',//返回的数据格式 json xml html text
					data: "userId="+userId,//传递给服务器的参数
					success:function(data){//与服务器交互成功以后的回调函数
						$('#userId').val(data.userId);
						$('#userName').val(data.userName);			
						$('#loginName').val(data.loginName);			
						$('#age').val(data.age);			
						$('#sex').val(data.sex);			
	
					}
				})	
			}
		},
		//ajax保存用户方法 
		//用json字符串传递请求参数
		saveUser :function(){
			var formObject = {};
			var formArray =$("#userEditForm").serializeArray();
			$.each(formArray, function(i, item){
				formObject[item.name]=item.value;
			 });
			//json序列化
		 	var jsonObj = JSON.stringify(formObject);
			$.ajax({
				type:'post', //请求方式
				url :'<%=path%>/sysmanage/user/userSaveAjaxJson.do',
				contentType :"application/json;charset=UTF-8",
				dataType:'json',//返回的数据格式 json xml html text
				data:jsonObj,//传递给服务器的参数
				success:function(data){//与服务器交互成功以后的回调函数 
					alert(data.result);	
					$('.con').eq(0).css({display:'block'}).siblings('.con').css({display:'none'});
					userMgr.queryUserList();

				}
			})					
		}
			
		
	  };
	  
	  
</script>



</html>  